<template>
	<div v-loading="isLoading" :class="{ ishidden : isLoading}" >
		<song-sheet-header :data="songSheetData" @playAll="playAll"></song-sheet-header>
		<song-sheet-lists :songData="songData" ref="songSheetLsts"></song-sheet-lists>
	</div>
</template>

<script>
	import { songSheetList, songSheetComment, songDetailed } from "@/network/songSheet.js"
	import songSheetHeader from "@/components/songSheetHeader/songSheetHeader.vue"
	import songSheetLists from "@/components/songSheetList/songSheetList.vue"
	export default {
		name: 'songSheet',
		data() {
			return {
				isLoading: true,
				songSheetData: {},
				songId: '',
				songData: ''
			}
		},
		components: {
			songSheetHeader,
			songSheetLists
		},
		created() {
			// 歌单详情
			songSheetList(this.$route.params.id).then(res => {
				let data = res.data.playlist;
				this.songSheetData = data;
				for (var i=0; i<data.trackIds.length; i++) {
					this.songId += data.trackIds[i].id + ','
				}
				// // 去除最后一个逗号
				this.songId = this.songId.substr(0, this.songId.length - 1);
				return songDetailed(this.songId)
			}).then(res => {
				// 歌曲详情
				this.songData = res.data.songs;
				this.isLoading = false;
			})
		},
		methods: {
			// 播放全部事件
			playAll() {
				this.$refs.songSheetLsts.playAll();
			}
		}
	}
</script>

<style lang="less" scoped>
	.ishidden {
		height: 83vh;
		overflow: hidden;
	}
</style>
